<template>
  <div class="map">
    <div id="mapContainer" />
    <div class="map-style">
      <p
        v-for="(item, index) in styleMapList"
        :key="index"
        :class="[activeIndex == index ? 'active' : '']"
        @click="itemClick(index, item)"
      >
        {{ item.label }}
      </p>
    </div>
    <div class="tuli">
      <div class="tuli-tips">
        <img
          src="../../assets/screen/screen-tuli-tips.png"
          v-if="tipShow"
          @click="tipShow = false"
        />
      </div>
      <img
        src="../../assets/screen/screen-tuli.png"
        v-if="!tipShow"
        @click="tipShow = true"
      />
    </div>
  </div>
</template>

<script>
import { innerScreenPropertyList } from "@/api/screen";

window.requestAnimFrame = (function () {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 50);
    }
  );
})();
export default {
  name: "Map",
  data() {
    return {
      map: {},
      polygons: [],
      district: "",
      markerList: [],
      satellite: "",
      styleType: "",
      styleMapList: [
        {
          label: "2D地图",
          value: "default",
        },
        {
          label: "卫星地图",
          value: "Satellite",
        },
      ],
      activeIndex: 1,
      classificationUnitList: [],
      currentZoom: 12,
      tipShow: true,
    };
  },
  created() {},
  mounted() {
    this.mapshow();
    this.setSpotsList();

    if (this.activeIndex === 1) {
      this.initLoadMap();
    }
    this.$bus.$on("getProInfoEvent", (mes, type) => {
      this.markerList.map((_v) => {
        // 相同marker展示文本
        if (
          _v.propertyGisLongitude == mes.propertyGisLongitude &&
          _v.propertyGisLatitude == mes.propertyGisLatitude
        ) {
          this.map.setZoomAndCenter(18, _v.marker.getPosition());
        }
      });
    });
    this.$bus.$on("getPropertyTypeCode", (val) => {
      this.postInnerScreenPropertyList(val);
      this.map.clearMap();
      this.markerList = []; // 重置标记数组
    });
  },
  methods: {
    itemClick(index, item) {
      this.activeIndex = index;
      if (item.value === "default") {
        this.layers.hide();
        this.styleType = "default";
      } else {
        this.initLoadMap();
      }
    },

    postInnerScreenPropertyList(params) {
      innerScreenPropertyList(params).then((res) => {
        if (res.code === 200) {
          this.classificationUnitList = res.data;
          this.setSpotsList();
        }
      });
    },

    setSpotsList() {
      // _showText 0 不清除label，1是展示lable文字2不展示label文字
      if (this.markerList.length && this.map) {
        let _markerList = [];
        this.markerList.map((_v) => {
          if (_v.marker) {
            _markerList.push(_v.marker);
          }
        });
        this.map.remove(_markerList);
        this.markerList = [];
      }

      this.classificationUnitList.map((_v) => {
        if (_v.propertyGisLongitude && _v.propertyGisLatitude) {
          if (this.currentZoom.toFixed(0) < 14) {
            let icon;
            if (_v.businessNature == 1) {
              if (_v.propertyCategoryId == 1) {
                icon = new AMap.Icon({
                  image: require("@/assets/screen/shi-jy.png"), // 图标的图片 URL
                  size: new AMap.Size(30, 38), //图标所处区域大小
                  imageSize: new AMap.Size(30, 38), //图标大小
                });
              } else if (_v.propertyCategoryId == 2) {
                icon = new AMap.Icon({
                  image: require("@/assets/screen/she-jy.png"), // 图标的图片 URL
                  size: new AMap.Size(30, 38), //图标所处区域大小
                  imageSize: new AMap.Size(30, 38), //图标大小
                });
              } else if (_v.propertyCategoryId == 3) {
                icon = new AMap.Icon({
                  image: require("@/assets/screen/guo-jy.png"), // 图标的图片 URL
                  size: new AMap.Size(30, 38), //图标所处区域大小
                  imageSize: new AMap.Size(30, 38), //图标大小
                });
              }
            } else {
              if (_v.propertyCategoryId == 1) {
                icon = new AMap.Icon({
                  image: require("@/assets/screen/shi-fjy.png"), // 图标的图片 URL
                  size: new AMap.Size(30, 38), //图标所处区域大小
                  imageSize: new AMap.Size(30, 38), //图标大小
                });
              } else if (_v.propertyCategoryId == 2) {
                icon = new AMap.Icon({
                  image: require("@/assets/screen/she-fjy.png"), // 图标的图片 URL
                  size: new AMap.Size(30, 38), //图标所处区域大小
                  imageSize: new AMap.Size(30, 38), //图标大小
                });
              } else if (_v.propertyCategoryId == 3) {
                icon = new AMap.Icon({
                  image: require("@/assets/screen/guo-fjy.png"), // 图标的图片 URL
                  size: new AMap.Size(30, 38), //图标所处区域大小
                  imageSize: new AMap.Size(30, 38), //图标大小
                });
              }
            }
            _v.marker = new AMap.Marker({
              map: this.map,
              anchor: "bottom-center",
              position: [_v.propertyGisLongitude, _v.propertyGisLatitude],
              extData: _v,
              offset: new AMap.Pixel(-17, -5),
              icon: icon,
              // content: `<div class="assetName2">${_v.propertyName}</div>`, //设置文本标注内容
            });
            _v.markerTextStatus = false;
            _v.marker.on("click", this.eventClick);
          }
        }
      });

      this.map.on("zoomend", () => {
        this.currentZoom = this.map.getZoom(); // 获取当前地图的缩放级别
        this.classificationUnitList.map((_v) => {
          if (_v.propertyGisLongitude && _v.propertyGisLatitude) {
            if (this.currentZoom.toFixed(0) < 14) {
              if (_v.marker) {
                _v.marker.setMap(null);
                _v.marker = null;
              }
              if (!_v.marker) {
                let icon = null;
                if (_v.businessNature == 1) {
                  if (_v.propertyCategoryId == 1) {
                    icon = new AMap.Icon({
                      image: require("@/assets/screen/shi-jy.png"), // 图标的图片 URL
                      size: new AMap.Size(30, 38), //图标所处区域大小
                      imageSize: new AMap.Size(30, 38), //图标大小
                    });
                  } else if (_v.propertyCategoryId == 2) {
                    icon = new AMap.Icon({
                      image: require("@/assets/screen/she-jy.png"), // 图标的图片 URL
                      size: new AMap.Size(30, 38), //图标所处区域大小
                      imageSize: new AMap.Size(30, 38), //图标大小
                    });
                  } else if (_v.propertyCategoryId == 3) {
                    icon = new AMap.Icon({
                      image: require("@/assets/screen/guo-jy.png"), // 图标的图片 URL
                      size: new AMap.Size(30, 38), //图标所处区域大小
                      imageSize: new AMap.Size(30, 38), //图标大小
                    });
                  }
                } else {
                  if (_v.propertyCategoryId == 1) {
                    icon = new AMap.Icon({
                      image: require("@/assets/screen/shi-fjy.png"), // 图标的图片 URL
                      size: new AMap.Size(30, 38), //图标所处区域大小
                      imageSize: new AMap.Size(30, 38), //图标大小
                    });
                  } else if (_v.propertyCategoryId == 2) {
                    icon = new AMap.Icon({
                      image: require("@/assets/screen/she-fjy.png"), // 图标的图片 URL
                      size: new AMap.Size(30, 38), //图标所处区域大小
                      imageSize: new AMap.Size(30, 38), //图标大小
                    });
                  } else if (_v.propertyCategoryId == 3) {
                    icon = new AMap.Icon({
                      image: require("@/assets/screen/guo-fjy.png"), // 图标的图片 URL
                      size: new AMap.Size(30, 38), //图标所处区域大小
                      imageSize: new AMap.Size(30, 38), //图标大小
                    });
                  }
                }
                _v.marker = new AMap.Marker({
                  map: this.map,
                  anchor: "bottom-center",
                  position: [_v.propertyGisLongitude, _v.propertyGisLatitude],
                  extData: _v,
                  offset: new AMap.Pixel(-17, -5),
                  icon: icon,
                  content: "", //设置文本标注内容
                });
                _v.markerTextStatus = false;
                _v.marker.on("click", this.eventClick);
              }
            } else {
              if (_v.marker) {
                _v.marker.setMap(null);
                _v.marker = null;
              }
              if (!_v.marker) {
                if (_v.businessNature == 1) {
                  if (_v.propertyCategoryId == 1) {
                    _v.marker = new AMap.Marker({
                      map: this.map,
                      anchor: "bottom-center",
                      position: [
                        _v.propertyGisLongitude,
                        _v.propertyGisLatitude,
                      ],
                      extData: _v,
                      offset: new AMap.Pixel(-17, -5),
                      icon: null,
                      content: `<div class="assetName2 bg1">${_v.propertyName}</div>`, //设置文本标注内容
                    });
                  } else if (_v.propertyCategoryId == 2) {
                    _v.marker = new AMap.Marker({
                      map: this.map,
                      anchor: "bottom-center",
                      position: [
                        _v.propertyGisLongitude,
                        _v.propertyGisLatitude,
                      ],
                      extData: _v,
                      offset: new AMap.Pixel(-17, -5),
                      icon: null,
                      content: `<div class="assetName2 bg3">${_v.propertyName}</div>`, //设置文本标注内容
                    });
                  } else if (_v.propertyCategoryId == 3) {
                    _v.marker = new AMap.Marker({
                      map: this.map,
                      anchor: "bottom-center",
                      position: [
                        _v.propertyGisLongitude,
                        _v.propertyGisLatitude,
                      ],
                      extData: _v,
                      offset: new AMap.Pixel(-17, -5),
                      icon: null,
                      content: `<div class="assetName2 bg5">${_v.propertyName}</div>`, //设置文本标注内容
                    });
                  }
                } else {
                  if (_v.propertyCategoryId == 1) {
                    _v.marker = new AMap.Marker({
                      map: this.map,
                      anchor: "bottom-center",
                      position: [
                        _v.propertyGisLongitude,
                        _v.propertyGisLatitude,
                      ],
                      extData: _v,
                      offset: new AMap.Pixel(-17, -5),
                      icon: null,
                      content: `<div class="assetName2 bg2">${_v.propertyName}</div>`, //设置文本标注内容
                    });
                  } else if (_v.propertyCategoryId == 2) {
                    _v.marker = new AMap.Marker({
                      map: this.map,
                      anchor: "bottom-center",
                      position: [
                        _v.propertyGisLongitude,
                        _v.propertyGisLatitude,
                      ],
                      extData: _v,
                      offset: new AMap.Pixel(-17, -5),
                      icon: null,
                      content: `<div class="assetName2 bg4">${_v.propertyName}</div>`, //设置文本标注内容
                    });
                  } else if (_v.propertyCategoryId == 3) {
                    _v.marker = new AMap.Marker({
                      map: this.map,
                      anchor: "bottom-center",
                      position: [
                        _v.propertyGisLongitude,
                        _v.propertyGisLatitude,
                      ],
                      extData: _v,
                      offset: new AMap.Pixel(-17, -5),
                      icon: null,
                      content: `<div class="assetName2 bg6">${_v.propertyName}</div>`, //设置文本标注内容
                    });
                  }
                }
                _v.markerTextStatus = false;
                _v.marker.on("click", this.eventClick);
              }
            }
          }
        });
      });

      this.markerList = this.classificationUnitList;
    },
    setActive(e, type) {
      this.markerList.map((_v) => {
        // 相同marker展示文本
        if (
          _v.propertyGisLongitude == e.propertyGisLongitude &&
          _v.propertyGisLatitude == e.propertyGisLatitude
        ) {
          this.$bus.$emit("getProInfoEvent", e);
          this.$emit("itemChange", 1);
        }
      });
    },
    eventClick(e) {
      let _obj = e.target.getExtData();
      this.setActive(_obj);
    },
    mapshow() {
      //定义地图中心点坐标
      this.map = new AMap.Map(document.getElementById("mapContainer"), {
        center: [119.026695, 31.687942],
        // zoom: 16,
        features: ["bg", "road", "point", "building"],
        showLabel: true,
        rotateEnable: false,
        pitchEnable: false,
        zoom: this.currentZoom,
        pitch: 65,
        // rotation: 45,
        // viewMode: "3D", // 开启3D视图,默认为关闭
        zooms: [2, 20],
        // mapStyle: "amap://styles/grey",
      });

      // 获取地图容器的大小
      const mapContainer = this.map.getContainer();
      const mapWidth = mapContainer.offsetWidth;
      const mapHeight = `calc(100vh)`;
      // 添加一层样式到地图上
      const customStyleDiv = document.createElement("div");
      customStyleDiv.style.position = "absolute";
      customStyleDiv.style.top = "0";
      customStyleDiv.style.left = "0";
      customStyleDiv.style.width = mapWidth + "px";
      customStyleDiv.style.height = mapHeight;
      customStyleDiv.style.pointerEvents = "none"; // 防止该层样式干扰地图的交互
      customStyleDiv.style.boxShadow = "50px 50px 500px #000 inset";
      mapContainer.appendChild(customStyleDiv);
    },
    initLoadMap() {
      this.styleType = "Satellite";
      // 切换地图样式
      this.layers = new AMap.TileLayer.Satellite({ map: this.map });
      this.layers && this.layers.show();
    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
  height: calc(100% - 12px);
  position: absolute;
  top: 0px;
  left: 0px;
}
.tuli {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 600px;
  height: auto;
  cursor: pointer;
  z-index: 9999;
}
.tuli-tips {
  position: absolute;
  bottom: 26px;
  left: 0;
  width: 200px;
  height: auto;
  cursor: pointer;
  z-index: 9999;
}
.tuli-tips img {
  width: 100%;
}
.tuli img {
  width: 100%;
}
.map-style {
  position: absolute;
  bottom: -15px;
  left: 2%;
  display: flex;
  border-radius: 6px;
}
.map-style p {
  min-width: 80px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #8db7ff;
  font-size: 14px;
  background: #1d2534;
  color: #fff;
  cursor: pointer;
  z-index: 9999;
}
.map-style p:nth-child(1) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  width: 80px;
}
.map-style p:nth-child(2) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  width: 80px;
}
.active {
  background: #2365e6 !important;
}
#mapContainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  /* box-shadow: 0 0 300px #000 inset !important; */
}
>>> .amap-icon {
  overflow: inherit !important;
}
>>> .amap-marker-label {
  border: 0;
  background-color: transparent;
}
>>> .amap-icon {
  z-index: 5;
}
>>> .assetName1 {
  min-width: 160px;
  min-height: 48px;
  line-height: 28px;
  color: #1b213b;
  z-index: 4;
  background: url("../../assets/screen/sign-active.png") no-repeat;
  background-size: cover;
  padding: 0 10px;
  text-align: center;
}
>>> .assetName2 {
  min-width: 160px;
  height: 48px;
  line-height: 26px;
  color: #fff;
  z-index: 4;
  padding: 0 15px 0 25px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

>>> .bg1 {
  background: url("../../assets/screen/jy-shi.png") no-repeat;
  background-size: contain;
}

>>> .bg2 {
  background: url("../../assets/screen/fjy-shi.png") no-repeat;
  background-size: contain;
}

>>> .bg3 {
  background: url("../../assets/screen/jy-she.png") no-repeat;
  background-size: contain;
}

>>> .bg4 {
  background: url("../../assets/screen/fjy-she.png") no-repeat;
  background-size: contain;
}

>>> .bg5 {
  background: url("../../assets/screen/jy-guo.png") no-repeat;
  background-size: contain;
}

>>> .bg6 {
  background: url("../../assets/screen/fjy-guo.png") no-repeat;
  background-size: contain;
}
</style>
